<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Editar usuario</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/responsive.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/misestilos.css" %}"> 
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/misestilos2.css" %}"> 
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">
</head>
<body>


	{% include "topmenu.html" %} <!-- Top menu -->

	<div class="container">
		<div class="row-fluid">
			
			{% include "sidebar.html" %} <!-- Side bar -->
			<div class="span9">
				{% if show_message_success %}
					<div class="alert alert-success">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
						{{mensaje_exito|safe}}                
                	</div>
	            {% endif %}
	            {% if show_message_error %}
	            	<div class="alert alert-error">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
						{{mensaje_error|safe}}                
	                </div>
	            {% endif %}
				
				<!-- Formulario Editar user-->
				<div class="page-header">
					<h1>Modificar User</h1>
				</div>
				<small><b>Campos con (*) son de caracter obligatorio para el registro.</b></small>
				
				<form action="/plataforma/universidades/edicion_user/" id="userForm" method="post"> 
					<div class="form-horizontal well">
						<div class="control-group">
							<label for="nombreUser" class="control-label"><b>Nombre</b></label>
							<div class="controls">
								<input type="text" name="nombreUser" id = "nombreUser" value="{{username}}" disabled class="textarea_edicion_user">
							</div>
						</div> <!-- NombreUser -->

						<div class="control-group">
							<label for="contraseña" class="control-label"><b>Cambiar contraseña</b></label>
							<div class="controls">
								<input type="password" name="pass" id = "pass" class="textarea_edicion_user">
								<span class="help-block"><small>Requerido. 100 caracteres o menos. Letras, dígitos y @/./+/-/_ solamente. </small> </span>
							</div>
						</div> <!-- Password -->
					</div>
					
					<h3>Informacion Personal: </h3>
					<div class="form-horizontal well">
						<div class="control-group">
							<label for="nombrePropio" class="control-label"><b>Nombre Propio</b></label>
							<div class="controls">
								<input type="text" name="nombrePropio" id = "nombrePropio" value="{{first_name}}" class="textarea_edicion_user">
							</div>	
						</div><!-- nombrePropio -->

						<div class="control-group">
							<label for="apellidos" class="control-label"><b>Apellidos</b></label>
							<div class="controls">
								<input type="text" name="apellidos" id = "apellidos" value="{{last_name}}" class="textarea_edicion_user">
							</div>	
						</div><!-- apellido -->

						<div class="control-group">
							<label for="correo" class="control-label"><b>Dirección de correo electrónico*</b></label>
							<div class="controls">
								<input type="email" name="correo" id = "correo" placeholder="ejemplo@ejemplo.com" value="{{email}}" onBlur="javascript:ajax_message_email(event);actualizarNombreUser(event)" class="textarea_edicion_user">
								<span class="help-block"><small>(El correo eletrónico se convierte en el username del user)</small></span>
								<div class="correoAlert"></div>
								<div class="result_email"></div>
							</div>
							
						</div><!-- correo -->


						<div class="control-group">
							<div class="controls">
								<input type="hidden" name="email" id = "email" value="{{email}}" >
							</div>	
						</div>	
					</div>	
				
					<h3>Permisos:</h3>
					<div class="form-horizontal well">	
						<div class="control-group">
							<label for="activo" class="checkbox"><b>Es activo (bloqueado/desbloqueado)</b>
								{%if active%}
									<input type="checkbox" name="activo" id = "activo" checked >
								{%else%}
									<input type="checkbox" name="activo" id = "activo" >
								{%endif%}

								<span class="help-block"><small>Indica si el user tiene la posibilidad de iniciar sesión en el sistema.</small></span>	
							</label><hr>

							<label for="staff" class="checkbox"><b>Es staff</b>
								{%if staff%}
									<input type="checkbox" name="staff" id = "staff" checked >
								{%else%}
									<input type="checkbox" name="staff" id = "staff" >
								{%endif%}
								<span class="help-block"><small>Indica si el user puede entrar en este sitio de administración.</small></span>
							</label><hr>

							<label for="superuser" class="checkbox"><b>Es superusuario</b>
								{%if superuser%}
									<input type="checkbox" name="superuser" id = "superuser" checked >
								{%else%}
									<input type="checkbox" name="superuser" id = "superuser" >
								{%endif%}
								<span class="help-block"><small>Indica que este user tiene todos los permisos sin asignárselos explícitamente.</small></span>
							</label>
						</div>
					</div>
					<!-- Permisos -->
				
					<!-- <h3>Grupos:</h3>
					<div class="form-horizontal well">
						<section>
						    <div>
						    	<label for="rightValues"><b>Grupos:</b></label>
						    	<select id="rightValues" name="rightValues" size="4" multiple>
						        	{%for gr in groups_der%}
						        		<option>{{gr}}</option>
						        	{%endfor%}
						        </select>
				   			</div>

							<div>
								<br /><br />
								<input type="button" id="btnRight" value="&lt;&lt;" />
								<input type="button" id="btnLeft" value="&gt;&gt;" />
							</div>
						    <div>
						        <label for="leftValues"><b>Asignado:</b></label>
						        <select id="leftValues" name="leftValues" size="4" multiple>
						        	{%for gr in groups_izq%}
						        		<option>{{gr}}</option>
						        	{%endfor%}
						        </select>
						    </div> 
						</section>
						<span class="help-block"><small> Mantenga presionado "Control", o "Command" en un Mac, para seleccionar más de una opción. </small></span>
					</div> --><!-- grupo -->

					<div class="control-group">
						<div class="controls">
							<input type="hidden" name="user_id" id = "user_id" value= {{identificador}}>
						</div>
					</div> <!-- id -->

					<!-- <div class="control-group">
						<div class="controls">
							<input type="hidden" name="opciones" id = "opciones" >
						</div>
					</div> -->

					<h3>Usuario:</h3>
					<div class="form-horizontal well">
						<div class="control-group"> 
							<label for="region" class="control-label" id="labelUniversidad"><b>Universidad*</b></label>
							<div class="controls">
								<select name="universidad"  id = "universidad" onBlur="javascript:message_universidad(event)" class="selectarea_edicion_user">
									{% for universidad in universidades %}
										{% if universidad.id == user_universidad_id %}
											<option selected="selected" value="{{ universidad.id }}">{{ universidad.nombre }}</option>
										{% endif %}
									{% endfor %}
										
									<option value="">| Elije una Universidad |</option>
									{% for universidad in universidades %}
										{% if universidad.id != user_universidad_id %}
											<option value="{{ universidad.id }}">{{ universidad.nombre }}</option>
										{% endif %}
									{% endfor %}
								</select>
								<div class="contentUniv"></div>
							</div>
						</div>  <!--/Usuario -->
					</div>
				
					{% csrf_token %}
					
					<div class="form-horizontal well" align="center">
						<button type="submit" class="btn btn-primary" onClick="javascript:myfunc(event)">Guardar</button>
					</div> <!-- Botones de opciones -->	
				</form>
			</div>
		</div> <!-- /row -->

	{% include "footer.html" %} <!-- Footer -->
	</div> <!-- /container -->

	<!-- JS files -->
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>

<script>
	function message_universidad(){
		if ($("#universidad").val() == ""){
		 	$(".contentUniv").html("<div class='alert alert-error'>Seleccione una universidad para asociar con el usuario. Si no existe, debe crearlo.</div>");
		}else{
		 	$(".contentUniv").html("");
		}
	}
	function actualizarNombreUser(){
		$("#nombreUser").val($("#correo").val());
	}
	//************************
	function ajax_message_email() {
	    $(".result_email").html("");
	    email = $("#correo").val()
	    if((email != $("#email").val()) && validateEmailFormat(email)){
		    $.ajax({
		       type: "POST",
		       url: "/plataforma/universidades/ajax_message_email/",
		       data: {'email': email},
		       cache: false,
		       success: function(returndata){
		       	if(returndata.tipo == "error")
		            $(".result_email").html("<div class='alert alert-error'>"+returndata.message+"</div>");
		        else if(returndata.tipo == "exito"){
		         	$(".result_email").html("<div class='alert alert-success'>"+returndata.message+"</div>");
		         	$(".correoAlert").html("");
		         }	

		       }
		    });
		}else{
			$(".correoAlert").html("<div class='alert alert-error'>Ingrese correctamente un email.</div>");
		}
	}
	//*************************
	function validateEmailFormat(email) { 
	    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	    return re.test(email);
	}
	//************************
	function myfunc(event){ 
		$("#leftValues option").each(function(index, element){
		 	$("#opciones").val($("#opciones").val()+$(this).html()+",");
		});
		
		if($("#correo").val() == ""){
			$(".correoAlert").html("<div class='alert alert-error'>Ingrese correctamente un email.</div>");
			event.preventDefault();
		}else if ($("#universidad").val() == ""){
		 	$(".contentUniv").html("<div class='alert alert-error'>Seleccione una universidad para asociar con el usuario. Si no existe, debe crearlo.</div>");
		 	event.preventDefault();
		 }else{
			$("#userForm").attr("action", "/plataforma/universidades/edicion_user/"+$("#user_id").val()+"/");
			$("#userForm").submit();
		}

	}
	$("#correo").blur(function(){
		if (($("#correo").val() != "") && ($("#correo").val() == $("#email").val())) {
			$(".correoAlert").html("");
		}
	});
	$("#universidad").blur(function(){
		if ($("#universidad").val() == ""){
		 	$(".contentUniv").html("<div class='alert alert-error'>Seleccione una universidad para asociar con el usuario. Si no existe, debe crearlo.</div>");
		}
	});

</script>
</body>
</html>